<template>
    <div id="owlleave">

      <div class="edit" @click="toEdit" v-if="ishow">
        <img src="../../assets/bianji.png"/>
      </div>
      <div class="card">
        <div class="face">#0</div>
        <div class="content">
          hello hello hello hello
        </div>
      </div>


      <div class="card">
        <div class="face">#1</div>
        <div class="content">
          hello hello hello hello
        </div>
      </div>


      <div class="card">
        <div class="face">#2</div>
        <div class="content">
          hello hello hello hello
        </div>
      </div>


      <div class="card">
        <div class="face">#3</div>
        <div class="content">
          hello hello hello hello
          hello hello hello hello
          hello hello hello hello
          hello hello hello hello
          hello hello hello hello
        </div>
      </div>

      <div class="card">
        <div class="face">#4</div>
        <div class="content">
          hello hello hello hello
          hello hello hello hello
          hello hello hello hello
        </div>
      </div>


      <div class="card">
        <div class="face">#5</div>
        <div class="content">
          hello hello hello hello
          hello hello hello hello
          hello hello hello hello
        </div>
      </div>


      <div class="card">
        <div class="face">#6</div>
        <div class="content">
          hello hello hello hello
          hello hello hello hello
        </div>
      </div>


<owl-edit-box ref="editpanel"></owl-edit-box>
    </div>
</template>

<script>
    import OwlEditBox from "../owlEditBox/owlEditBox";
    export default {
        name: "owlLeave",
      components: {OwlEditBox},
      data(){

          return{

            ishow:true
          }
      },
      methods:{


        toEdit(){


          this.$refs.editpanel.toggle();
          this.hide();
        },
        show(){


          this.ishow=true;

        },
        hide(){

          this.ishow=false;
        }
      }
    }
</script>

<style scoped>

  #owlleave{

    width: calc(100% - 24px);
    margin-left: 12px;
    min-height: 100%;
    position: absolute;

  }
  .card{
    width: calc(100% - 12px);
    height: auto;
    display: flex;
    padding: 4px;
    margin-bottom: 12px;
    margin-top: 6px;
  }

  .card .face{

    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }

  .card .content{

    margin-left: 12px;
    width: calc(100% - 78px);
    height: auto;
    background-color: rgba(255,255,255,0.5);
    margin-top: 24px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    color: white;
    text-align: left;
    padding: 8px;
    font-size: 16px;

  }
  .edit{

    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,204,35,1);
    position: fixed;
    left: 100%;
    margin-left: -50px;
    top: 100%;
    margin-top: -60px;
    z-index: 120;
    transition: all ease-out 0.4s;
  }

  .edit:active{

    opacity: 0.6;
  }

  .edit img{

    width: 40px;
    height: 40px;


  }


</style>
